<template>
  <div class="preview-article">
    <div class="preview-header">
      <div class="audit-btn-box">
        <el-select v-model="curPreview" style="width: 100px; margin-right: 10px" placeholder="请选择" @change="changePreview">
          <el-option v-for="(item, index) in previewTypeOptions" :key="index" :label="item.label" :value="item.value" />
        </el-select>
        <!-- <button class="preview-btn" @click="handleEdit">编辑</button> -->
        <button class="preview-btn" @click="handleApproved">通过</button>
        <button class="preview-btn" @click="handleRollback" v-if="nodeConfig.operations?.rollback">驳回</button>
        <button class="preview-btn" @click="handleReject">拒绝</button>
      </div>
      <div v-if="curPreview == 2" class="preview-btn-box">
        <button class="preview-btn preview-way-btn" :class="{ active: activeWay === 'pc' }" @click="activeWay = 'pc'">pc电脑</button>
        <button class="preview-btn preview-way-btn" :class="{ active: activeWay === 'pad' }" @click="activeWay = 'pad'">平板</button>
        <button class="preview-btn preview-way-btn" :class="{ active: activeWay === 'phone' }" @click="activeWay = 'phone'">手机</button>
      </div>
    </div>
    <!-- 审核模式 -->
    <div class="audit-content" v-loading="previewLoading" v-show="curPreview == 1">
      <!-- 左侧抽屉 -->
      <div :class="{ 'left-box': true, 'col-expand-left': drawerLeft }">
        <div class="left-resize-bar" v-show="drawerLeft">⋮</div>
        <div class="col-btn-left" @click="toggleExpandLeft">
          <i class="iconfont">&#xe771;</i>
        </div>
        <div class="my-tabs-box">
          <div class="my-tabs-detail">
            <div class="my-tab" :class="curTabLeftIndex == index ? 'my-tab-active' : ''" v-for="(item, index) in myTabLeft" :key="index" @click="tabLeftClick(index)">{{ item.label }}</div>
          </div>
        </div>
        <!-- 审核进度 -->
        <div class="audit-progress" v-show="previewContentTab == 0">
          <AuditProgress :id="instanceId" v-model:nodeConfig="nodeConfig" />
        </div>
        <!-- 发布详情 -->
        <div class="publish-detail-box" v-show="previewContentTab == 1">
          <div class="publish-detail">
            <div class="label-value" v-for="item in fieldsPosition.publish_setting" :key="item.id">
              <div class="label">{{ item.name }}：</div>
              <div class="value">{{ fieldsValue[item.field] }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 内容详情 -->
      <div class="preview-father">
        <div class="preview-box">
          <div class="editor-box" ref="modelComponentRef">
            <div class="page-footer-icon page-left-top"></div>
            <div class="page-footer-icon page-right-top"></div>
            <!-- 模型内容 -->
            <div class="content-container" ref="" v-if="Object.keys(fieldsValue).length">
              <div class="basic-content">
                <div v-for="(item, index) in fieldsPosition.basic_msg" :key="index" class="field-item">
                  <div class="field-item-name">{{ item.name }}：</div>
                  <div v-html="fieldsValue[item.field]" class="field-item-value"></div>
                </div>
              </div>
              <div class="expand-content" v-if="fieldsPosition.expand_msg">
                <div v-for="(item, index) in fieldsPosition.expand_msg" :key="index" class="field-item">
                  <div class="field-item-name">{{ item.name }}：</div>
                  <div v-html="fieldsValue[item.field]" class="field-item-value"></div>
                </div>
              </div>
              <div class="edit-content">
                <div v-for="(item, index) in fieldsPosition.editor_class" :key="index">
                  <div v-if="fieldsValue.is_link == 1 && modelDetail.publishType == 1" class="field-item">
                    该内容为外链，请切换为预览模式查看 <el-button link type="primary" size="small" @click="changePreview(2)">点击切换</el-button>
                  </div>
                  <div v-else class="field-item">
                    <div class="field-item-name">{{ item.name }}：</div>
                    <div v-html="fieldsValue[item.field]"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="page-footer-icon page-left-bottom"></div>
            <div class="page-footer-icon page-right-bottom"></div>
          </div>
        </div>
        <div class="editor-right-btns-box">
          <div class="editor-right-btns">
            <el-tooltip class="box-item" effect="dark" content="扫描" placement="left">
              <div class="circle scan" @click="handleSafeScan">
                <i class="iconfont import-icon">&#xe602;</i>
              </div>
            </el-tooltip>
          </div>
        </div>
      </div>
      <!-- 右侧抽屉-->
      <div :class="{ 'right-box': true, 'col-expand': rightDrawer }">
        <div class="right-resize-bar" v-show="rightDrawer">⋮</div>
        <div class="right-box-detail">
          <div class="col-btn" @click="toggleExpand">
            <i class="iconfont">&#xe771;</i>
          </div>
          <div class="my-tabs-box my-tabs-box-right">
            <div class="my-tabs-detail">
              <div class="my-tab" :class="curTabRightIndex == index ? 'my-tab-active' : ''" v-for="(item, index) in myTabRight" :key="index" @click="tabRightClick(index)">{{ item.label }}</div>
            </div>
          </div>
          <div v-if="curTabRightIndex == 0" class="safe-scan-box">
            <SafeScan ref="safeScan" :fieldsValue="fieldsValue" :fieldsMapping="userFieldsMapping" :fieldsFlat="userFieldsFlat" :readonly="true" @handleSetSafeDrawer="handleSetSafeDrawer">
              <template #footer>
                <el-button type="danger" @click="handleMarkKeyWords">在文中标红</el-button>
                <el-button type="success" @click="handleCancelMark">取消标红</el-button>
              </template>
            </SafeScan>
          </div>
        </div>
      </div>
    </div>
    <!-- 预览模式 -->
    <div class="preview-content" v-loading="previewLoading" v-show="curPreview == 2">
      <div class="preview-box" :class="{ 'preview-box-pc': activeWay === 'pc', 'preview-box-pad': activeWay === 'pad', 'preview-box-phone': activeWay === 'phone' }">
        <iframe :src="previewUrl" frameborder="no" style="width: 100%; height: 100%"></iframe>
      </div>
    </div>
  </div>
</template>

<script setup>
/* eslint-disable */
import { ref, onMounted } from 'vue'
import { processTaskAudit } from '@/api/workflow'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { myThrottle, createMapping } from '@/utils/tools'
import { getContentDetailPlus, checkPreview } from '@/api/content'
import { getModelDetail, getFieldListByCatId } from '@/api/model'
import { jumpRoute } from '@ruifox-cms/utils'
import dayjs from 'dayjs'
import SafeScan from '@/views/flow/task/components/station/SafeScan'
import AuditProgress from '@/views/flow/task/components/AuditProgress'

const router = useRouter()
const catId = ref(router.currentRoute.value.query.catId)
const modelId = ref(router.currentRoute.value.query.modelId)
const dataId = ref(router.currentRoute.value.query.dataId)
const instanceId = ref(router.currentRoute.value.query.instanceId)
const previewLoading = ref(false)
const nodeConfig = ref({}) // 当前审核节点信息（主要用于判断有哪些操作权限）
/**************************************************************左右抽屉拖拽*******************************************************/
let leftModuleWidth = ref(430 + 'px')
let rightModuleWidth = ref(500 + 'px')

const handleDragLeftResizeBar = () => {
  var leftResizeBar = document.getElementsByClassName('left-resize-bar')[0]
  var leftBox = document.getElementsByClassName('left-box')[0]
  // 鼠标按下事件
  leftResizeBar.onmousedown = function () {
    leftBox.style['transition'] = 'none'
    // 鼠标移动事件
    function moveBar(eventMove) {
      let width = eventMove.clientX
      if (width >= 1280) {
        width = 1280 // 设置最大拉伸宽度为1280
      } else if (width <= 200) {
        width = 200
      }
      leftModuleWidth.value = width + 'px'
      setPreviewFather(drawerLeft.value, width)
    }
    let throttle = myThrottle(moveBar, 25)
    document.onmousemove = throttle
    // 鼠标松开事件
    document.onmouseup = function () {
      leftBox.style['transition'] = 'width 0.8s'
      // 颜色恢复
      document.onmousemove = null
      document.onmouseup = null
      leftResizeBar.releaseCapture && leftResizeBar.releaseCapture() // ReleaseCapture()函数用于释放该元素捕获的鼠标
    }
    leftResizeBar.setCapture && leftResizeBar.setCapture() // setCapture()函数用于设置该元素捕获的鼠标为空
    // 说明：一般情况下，SetCapture()和ReleaseCapture()函数是成对使用的。在使用SetCapture()函数捕获鼠标之后，需要在适当的时候调用ReleaseCapture()函数释放鼠标，否则可能会导致鼠标失去响应或者其他异常情况
    return false
  }
}

const handleDragRightResizeBar = () => {
  var rightResizeBar = document.getElementsByClassName('right-resize-bar')[0]
  var wholeArea = document.getElementsByClassName('audit-content')[0]
  var rightBox = document.getElementsByClassName('right-box')[0]
  // 鼠标按下事件
  rightResizeBar.onmousedown = function () {
    rightBox.style['transition'] = 'none'
    // 鼠标移动事件
    function moveBar(eventMove) {
      let width = wholeArea.clientWidth - eventMove.clientX
      if (width >= 1280) {
        width = 1280 // 设置最大拉伸宽度为1280
      } else if (width <= 200) {
        width = 200
      }
      rightModuleWidth.value = width + 'px'
      setPreviewFather(rightDrawer.value, width)
    }
    let throttle = myThrottle(moveBar, 25)
    document.onmousemove = throttle
    // 鼠标松开事件
    document.onmouseup = function () {
      rightBox.style['transition'] = 'width 0.8s'
      // 颜色恢复
      document.onmousemove = null
      document.onmouseup = null
      rightResizeBar.releaseCapture && rightResizeBar.releaseCapture() // ReleaseCapture()函数用于释放该元素捕获的鼠标
    }
    rightResizeBar.setCapture && rightResizeBar.setCapture() // setCapture()函数用于设置该元素捕获的鼠标为空
    // 说明：一般情况下，SetCapture()和ReleaseCapture()函数是成对使用的。在使用SetCapture()函数捕获鼠标之后，需要在适当的时候调用ReleaseCapture()函数释放鼠标，否则可能会导致鼠标失去响应或者其他异常情况
    return false
  }
}

const drawerLeft = ref(true)
const toggleExpandLeft = () => {
  drawerLeft.value = !drawerLeft.value
  setPreviewFather(drawerLeft.value, parseInt(leftModuleWidth.value))
}

const rightDrawer = ref(false)
const toggleExpand = () => {
  rightDrawer.value = !rightDrawer.value
  setPreviewFather(rightDrawer.value, parseInt(rightModuleWidth.value))
}

// 监听 内容区域.preview-father 宽度 使之保持居中
const setPreviewFather = (isShow, boxWith = 500) => {
  let previewFather = document.querySelector('.preview-father')
  let previewBox = document.querySelector('.preview-box')
  let fWidth = previewFather.offsetWidth
  let bWidth = previewBox.offsetWidth
  let cutWidth = isShow ? boxWith : -boxWith
  if (fWidth - cutWidth < bWidth) {
    previewBox.style['left'] = '0'
    previewBox.style['transform'] = 'translateX(0)'
  } else {
    previewBox.style['left'] = '50%'
    previewBox.style['transform'] = 'translateX(-50%)'
  }
}
/*******************************************************审核模式操作********************************************************/
// 切换模式
const previewTypeOptions = ref([
  { label: '审核模式', value: 1 },
  { label: '预览模式', value: 2 }
])
const curPreview = ref(1)
const previewUrl = ref('')
const changePreview = type => {
  curPreview.value = type
  if (type === 2) {
    if (previewUrl.value) return
    // 获取预览信息
    previewLoading.value = true
    if (fieldsValue.value.url) {
      previewUrl.value = fieldsValue.value.url
    } else {
      const dataContent = fieldsValue.value
      dataContent.create_time = dayjs(dataContent.create_time, 'YYYY/MM/DD AHH:mm').unix()
      let obj = {
        catId: catId.value,
        dataContent
      }
      checkPreview(obj).then((res) => {
        const htmlContent = res.data
        const blob = new Blob([htmlContent], { type: "text/html" })
        previewUrl.value = URL.createObjectURL(blob)
      })
    }
    previewLoading.value = false
  }
}

// 通过审核
const taskId = ref(router.currentRoute.value.query.taskId)
const handleApproved = () => {
  ElMessageBox.confirm('<div><p style="font-size: 14px;">是否确认通过审核？</p></div>', '提示', {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
    .then(() => {
      processTaskAudit({
        id: taskId.value,
        approvalResult: 'approved',
        variableMap: {}
      })
        .then(() => {
          // 更新审核列表
          ElMessage.success('通过成功')
          window.opener.updateAuditFatherPage('通过成功')
          window.close()
        })
    })
    .catch(() => {
      ElMessage.success('已取消')
    })
}

// 获取模型详情
const modelDetail = ref([])
const _getModelDetail = async () => {
  const res = await getModelDetail({id: modelId.value})
  if (res.code === 20000) {
    modelDetail.value = res.data
  }
}
_getModelDetail()
// 编辑
const handleEdit = () => {
  let query
  if (modelDetail.value.publishType === 1) {
    // 文章发布
    query = {
      modelId: modelId.value,
      catId: catId.value,
      dataId: dataId.value,
      publishType: 1,
      isUnderReview: true //是否是审核中
    }
  } else {
    query = {
      modelId: modelId.value,
      catId: catId.value,
      dataId: dataId.value,
      publishType: 0,
      isUnderReview: true //是否是审核中
    }
  }
  jumpRoute('/content/manage/setting', query, '_blank')
}

// 驳回
const handleRollback = () => {
  ElMessageBox.confirm('<div><p style="font-size: 14px;">是否确认驳回到设定环节？</p></div>', '提示', {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
    .then(() => {
      processTaskAudit({
        id: taskId.value,
        approvalResult: 'rollback',
        variableMap: {}
      })
        .then(() => {
          // 更新审核列表
          ElMessage.success('驳回成功')
          // window.close()
        })
    })
    .catch(() => {
      ElMessage.success('已取消')
    })
}

// 拒绝
const handleReject = () => {
  ElMessageBox.prompt('<div><p style="font-size: 14px;">请输入拒绝理由：</p></div>', '提示', {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    inputErrorMessage: '拒绝理由不能为空',
    inputValidator: value => {
      if (!value) {
        return '输入内容不能为空'
      }
      return true
    }
  })
    .then(({ value }) => {
      processTaskAudit({
        id: taskId.value,
        approvalResult: 'rejected',
        comment: value,
        variableMap: {}
      })
        .then(() => {
          // 更新审核列表
          ElMessage.success('拒绝成功')
          // window.close()
        })
        .catch(() => {
          ElMessage.success('已取消')
        })
    })
    .catch(() => {})
}
// 切换tab-左侧
const myTabLeft = ref([{ label: '审核进度' }, { label: '发布详情' }])
const previewContentTab = ref(0)
const curTabLeftIndex = ref(0)
const tabLeftClick = index => {
  curTabLeftIndex.value = index
  previewContentTab.value = index
}
// 切换tab-右侧
const curTabRightIndex = ref(0)
const myTabRight = ref([{ label: '安全检测' }])
const tabRightClick = index => {
  curTabRightIndex.value = index
}
// 获取内容详情
const fieldsValue = ref({})
const fieldsValueCopy = ref('')
const _getContentDetail = async () => {
  const query = {
    catId: catId.value,
    dataId: dataId.value
  }
  const res = await getContentDetailPlus(query)
  if (res.code === 20000) {
    fieldsValue.value = res.data
    fieldsValue.value.cat_id = res.data.category_name
    fieldsValue.value.publish_user_id = res.data.publish_user
    fieldsValueCopy.value = JSON.stringify(fieldsValue.value)
  }
}
_getContentDetail()
// 获取模型字段(按字段位置分类)
const fieldsPosition = ref([])
const userFieldsFlat = ref([])
const userFieldsMapping = ref({})
const getFields = async () => {
  const res = await getFieldListByCatId({ catId: catId.value })
  if (res.code === 20000) {
    // 按位置给字段分类
    const result = {}
    res.data.forEach(item => {
      const position = item.setting.fieldPosition
      if (!position || !item.isForm) return
      if (!result[position]) {
        result[position] = []
      }
      result[position].push(item)
    })
    fieldsPosition.value = result
    // 处理扫描
    userFieldsFlat.value = res.data.filter(item => item.isForm && !item.isSystem)
    userFieldsMapping.value = createMapping(res.data, { keyProp: 'field', valueProp: 'name' })
  }
}
getFields()
// 安全扫描
const safeScan = ref(null)
const handleSafeScan = async () => {
  const result = await safeScan.value.handleSafeScan()
  if (!result.isPass) {
    handleSetSafeDrawer()
  }
}
// 设置右侧抽屉状态，避免检测结果未显示
const handleSetSafeDrawer = () => {
  toggleExpand()
  curTabRightIndex.value = 0
}
const wordsClassOpiton = {
  1: 'level-1',
  2: 'level-2',
  3: 'level-3'
}
const linksClassOpiton = {
  0: 'link-0',
  1: 'link-1',
  2: 'link-2',
  3: 'link-3',
  4: 'link-4',
  5: 'link-5'
}
// 获取类名
const getClassName = (key, option) => {
  return option[key] || 'level-default'
}
// 标红
const handleMarkKeyWords = () => {
  let riskWords = []
  let errorWords = []
  let backLinks = []
  for (let key in safeScan.value.originResult.resultMap) {
    const item = safeScan.value.originResult.resultMap[key]
    item.riskWords.forEach(item => (item.key = key))
    item.errorWords.forEach(item => (item.key = key))
    item.backLinks.forEach(item => (item.key = key))
    riskWords.push(...item.riskWords)
    errorWords.push(...item.errorWords)
    backLinks.push(...item.backLinks)
  }
  getNewHtml(riskWords, 'word', 'levelId', wordsClassOpiton)
  getNewHtml(errorWords, 'word', 'levelId', wordsClassOpiton)
  getNewHtml(backLinks, 'word', 'levelId', linksClassOpiton)
}
//给扫描出的关键词添加样式
const getNewHtml = (arr, textKey, classKey, option) => {
  //去重
  let uniqueWords = new Map()
  // 遍历原数组中的每个元素
  arr.forEach(word => {
    // 如果uniqueWords中不包含当前word属性，则将当前元素添加到uniqueWords中
    if (!uniqueWords.has(word[textKey])) {
      uniqueWords.set(word[textKey], word)
    }
    // 如果uniqueWords中已经包含当前word属性，比较其level值大小，保留level值最大的元素
    else {
      let existingWord = uniqueWords.get(word[textKey])
      if (existingWord[classKey] < word[classKey]) {
        uniqueWords.set(word[textKey], word)
      }
    }
  })
  // 将Map对象转换成数组形式输出结果
  let result = Array.from(uniqueWords.values())
  let regex
  result.forEach(keyword => {
    // 构建正则表达式，匹配当前关键词
    regex = new RegExp(keyword[[textKey]], 'gi')
    // 将正则表达式和样式保存到对象中
    keyword.regex = regex
    keyword.classes = getClassName(keyword[classKey], option)
  })
  result.forEach(keyword => {
    fieldsValue.value[keyword.key] = fieldsValue.value[keyword.key].replace(keyword.regex, match => {
      return `<span class="${keyword.classes}">${match}</span>`
    })
  })
}
// 取消标红
const handleCancelMark = () => {
  fieldsValue.value = JSON.parse(fieldsValueCopy.value)
}
/*****************************************************************预览模式操作**********************************************************/
const activeWay = ref('pc')

onMounted(() => {
  window['updateAuditPage'] = val => {
    ElMessage({
      showClose: true,
      message: val,
      type: 'success'
    })
    if (val == '编辑成功') {
      console.log(33333333)
      // 重新获取内容
      _getContentDetail()
    } else {
      try {
        window.opener.updateAuditFatherPage(val)
        window.close()
      } catch {
        window.close()
      }
    }
  }
  handleDragRightResizeBar()
  handleDragLeftResizeBar()
})
</script>

<style scoped lang="scss">
.preview-article {
  .preview-header {
    height: 64px;
    background-color: $mainColor;
    display: flex;
    padding: 0 16px;
    justify-content: space-between;
    align-items: center;
    .quit-btn {
      cursor: pointer;
      height: 32px;
      width: 60px;
      color: $mainColor;
      line-height: 32px;
      text-align: center;
      border-radius: 4px;
      background-color: #fff;
      font-size: 14px;
      user-select: none;
    }
    .audit-btn-box,
    .preview-btn-box {
      display: flex;
      .el-select {
        ::v-deep(.el-input__wrapper) {
          background-color: $mainColor;
          box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset !important;
          svg {
            color: #fff;
          }
        }
        ::v-deep(.el-input__inner) {
          color: #fff;
        }
      }
      ::v-deep .el-select .el-input.is-focus .el-input__wrapper {
        box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset !important;
      }

      .preview-btn {
        height: 32px;
        padding: 0 15px;
        line-height: 32px;
        border: 1px solid $white;
        border-radius: 4px;
        background-color: inherit;
        color: $white;
        margin-right: 10px;
        cursor: pointer;
        transition: all 0.3s;
      }
      .preview-btn.preview-way-btn:hover {
        color: $mainColor;
        background-color: $white;
      }
      .preview-btn.preview-way-btn.active {
        color: $mainColor;
        background-color: $white;
      }
      .preview-btn:hover {
        background-color: rgba($white, 0.1);
      }
    }
    .preview-btn-box {
      width: 235px;
    }
  }
  .audit-content {
    width: 100vw;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    height: calc(100vh - 64px);
    background-color: $focusContent;
    display: flex;
    justify-content: space-between;
    .left-box {
      box-sizing: border-box;
      width: 0;
      background: #fff;
      margin-right: 30px;
      position: relative;
      transition: all 0.8s;
      z-index: 9;
      .left-resize-bar {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        width: 7px;
        height: 100%;
        background-color: rgb(255, 255, 255);
        cursor: col-resize;
        user-select: none;
        transition: all ease 0.3s;
        font-size: 20px;
        color: #40485c;
        z-index: 999;

        &:hover {
          color: #fff !important;
          background-color: $mainColor !important;
        }
      }
      .col-btn-left {
        position: absolute;
        height: 120px;
        width: 16px;
        right: -16px;
        top: 50%;
        transform: translateY(-50%);
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        background-color: $mainColor;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        flex-direction: column;
        z-index: 1;
        span {
          font-size: 14px;
          writing-mode: tb-rl;
          display: block;
          margin-bottom: 5px;
          color: #fff;
        }
        i {
          color: #fff;
          font-size: 12px;
          transform: rotate(-90deg);
        }
      }
      // 发布详情
      .publish-detail-box {
        height: calc(100vh - 160px);
        overflow-y: auto;
        overflow-x: hidden;
        // 移入显示滚动条
        &::-webkit-scrollbar {
          width: 8px;
          height: 8px;
          background-color: transparent;
        }
        &:hover::-webkit-scrollbar-thumb {
          border-radius: 5px;
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: rgba(0, 0, 0, 0.1);
        }
        .publish-detail {
          box-sizing: border-box;
          width: v-bind(leftModuleWidth);
          padding: 0 40px;
          .label-value {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 20px;
            font-size: 16px;
            .label {
              flex-shrink: 0;
              width: 84px;
              color: #797979;
              align-self: flex-start;
            }
            .value {
              line-height: 1.5;
              word-break: break-all;
              overflow-wrap: break-word;
              white-space: normal;
              flex-grow: 1;
            }
          }

          .icon_text_box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .icon_text {
              // min-width: 57px;
              display: flex;
              flex-wrap: nowrap;
              margin-right: 12px;
              .iconfont {
                margin-right: 2px;
              }
              .icon-morentupian {
                color: #2cbf77;
              }
              .icon-lianjie {
                color: #539efa;
              }
              .icon-a-fujian1 {
                color: #c7c7c7;
              }
            }
          }
        }
      }
    }
    .left-box.col-expand-left {
      width: v-bind(leftModuleWidth);
      flex-shrink: 0;
      box-shadow: 5px 0 5px rgba(0, 0, 0, 0.1);
      .col-btn-left i {
        transform: rotate(90deg);
      }
    }
    .preview-father {
      box-sizing: border-box;
      position: relative;
      margin: 10px 0;
      // padding-bottom: 10px;
      flex: 1;
      display: flex;
      justify-content: center;
      // overflow: auto;
      flex-shrink: 0;
      .preview-box {
        width: 880px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;
        overflow: auto;
        transition: all 0.8s;
        // 移入显示滚动条
        &::-webkit-scrollbar {
          width: 8px;
          height: 8px;
          background-color: transparent;
        }
        &:hover::-webkit-scrollbar-thumb {
          border-radius: 5px;
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: rgba(0, 0, 0, 0.1);
        }
        .editor-box {
          background-color: #fff;
          min-height: calc(100vh - 84px);
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          box-sizing: border-box;
          padding: 40px;
          padding-bottom: 40px;
          position: relative;
          transition: all 0.5s;
          .content-container {
            .field-item {
              display: flex;
              color: #000;
              .field-item-name {
                font-weight: bold;
                flex-shrink: 0;
              }
            }
            .basic-content,
            .expand-content,
            .edit-content {
              padding: 20px 0;
              border-bottom: 1px solid #e4e4e4;
              .field-item {
                padding: 10px 0;
                line-height: 1.5;
              }
            }
            .edit-content {
              border: none;
              .field-item {
                display: block;
              }
            }
          }
          .page-footer-icon {
            height: 20px;
            width: 20px;
            position: absolute;
          }
          .page-left-top {
            left: 20px;
            top: 20px;
            border-right: 1px solid $weightBar;
            border-bottom: 1px solid $weightBar;
          }
          .page-right-top {
            right: 20px;
            top: 20px;
            border-left: 1px solid $weightBar;
            border-bottom: 1px solid $weightBar;
          }
          .page-left-bottom {
            left: 20px;
            bottom: 20px;
            border-right: 1px solid $weightBar;
            border-top: 1px solid $weightBar;
          }
          .page-right-bottom {
            right: 20px;
            bottom: 20px;
            border-left: 1px solid $weightBar;
            border-top: 1px solid $weightBar;
          }
        }
      }
      .editor-right-btns-box {
        position: absolute;
        top: 0;
        right: -10px;
        height: 45px;
        overflow: hidden;
        transition: all 0.4s;
        .editor-right-btns {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          .tools {
            border-radius: 5px;
          }
          .circle {
            width: 45px;
            height: 45px;
            border-bottom: 1px #fff solid;
            margin-left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            cursor: pointer;
            font-size: 14px;
            background: $mainColor;
            color: #fff;
            box-sizing: border-box;
            overflow: hidden;
            .el-icon,
            i {
              font-size: 24px;
            }
            &:first-child {
              border-radius: 5px;
            }
            &:last-child {
              border-bottom-left-radius: 5px;
              border-bottom-right-radius: 5px;
            }
          }
        }
      }
      ::v-deep(.article-card) {
        position: fixed;
        width: 570px;
        height: 730px;
        box-sizing: border-box;
        left: 12%;
        top: 15%;
        z-index: 9999;
        transition: none;
        .el-card__body {
          padding-left: 0;
          padding-right: 0;
        }
        .article-box {
          .article-title {
            font-weight: bold;
            padding: 0 20px;
            position: relative;
            display: flex;
            justify-content: space-between;
            align-content: center;
            .article-title-left {
              width: 80%;
            }
            #drag-icon {
              user-select: none;
            }
            .icon-close {
              width: 24px;
              height: 24px;
              display: flex;
              justify-content: center;
              align-content: center;
              position: absolute;
              top: 0;
              right: 36px;
              cursor: pointer;
              .el-icon,
              i {
                width: 20px;
                height: 20px;
                font-size: 20px;
                cursor: pointer;
              }
              i {
                margin-left: 10px;
              }
            }
          }
          .el-divider {
            width: calc(100% - 40px);
            margin: 20px auto;
          }
          .article-content {
            padding: 0 20px;
            .article-content-detail {
              min-height: 620px;
              background: #f0f8fa;
            }
          }
        }
      }
    }
    .right-box {
      width: 0;
      background: #fff;
      z-index: 999;
      margin-left: 22px;
      transition: width 0.8s;
      position: relative;
      box-sizing: border-box;
      .right-resize-bar {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        width: 7px;
        height: 100%;
        background-color: rgb(255, 255, 255);
        cursor: col-resize;
        user-select: none;
        transition: all ease 0.3s;
        font-size: 20px;
        color: #40485c;
        z-index: 999;

        &:hover {
          color: #fff !important;
          background-color: $mainColor !important;
        }
      }
      .right-box-detail {
        overflow: hidden;
      }
      .col-btn {
        position: absolute;
        height: 120px;
        width: 16px;
        left: -16px;
        top: 50%;
        transform: translateY(-50%);
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        background-color: $mainColor;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        flex-direction: column;
        span {
          font-size: 14px;
          writing-mode: tb-rl;
          display: block;
          margin-bottom: 5px;
          color: #fff;
        }
        i {
          color: #fff;
          font-size: 12px;
          transform: rotate(90deg);
        }
      }
    }
    .right-box.col-expand {
      width: v-bind(rightModuleWidth);
      flex-shrink: 0;
      box-shadow: -5px 0 5px rgba(0, 0, 0, 0.1);
      .col-btn i {
        transform: rotate(-90deg);
      }
    }
    .my-tabs-box {
      overflow: hidden;
      .my-tabs-detail {
        box-sizing: border-box;
        width: v-bind(leftModuleWidth);
        height: 59px;
        padding: 0px 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 40px;
        position: relative;
        color: #aaa;
        &::before {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          width: calc(100% - 80px);
          height: 1px;
          background: rgb(121, 121, 121, 0.3);
          transform: translateX(-50%);
        }
        .my-tab {
          margin-right: 40px;
          cursor: pointer;
          white-space: nowrap;
        }
        .my-tab-active {
          font-weight: bold;
          color: #000;
        }
      }
      .el-divider {
        width: calc(v-bind(leftModuleWidth) - 80px);
        margin: 0 auto;
      }
    }
    .my-tabs-box-right {
      .my-tabs-detail {
        width: v-bind(rightModuleWidth);
        margin-bottom: 20px;
      }
    }
    .safe-scan-box {
      padding: 0 40px;
    }
  }
  .preview-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 64px);
    overflow: hidden;
    background-color: #fff;
    .preview-box {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      transition: all 0.5s;
    }
    .preview-box-pc {
      border: none;
    }
    .preview-box-pad,
    .preview-box-phone {
      width: 66.67%;
      height: 66.67%;
      box-shadow: 0 0 0 2px #d1d5db;
      border: 1px solid rgb(209 213 219);
      border-radius: 6px;
    }
    .preview-box-phone {
      width: 384px;
      height: 800px;
    }
  }
}
.reject-audit {
  .audit-title {
    margin-bottom: 15px;
  }
  .reject-audit-reason-title {
    margin-bottom: 5px;
  }
}
.audit-result {
  padding-top: 20px;
}
.audit-progress {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  color: #333;
  .label {
    width: 150px;
    display: flex;
    align-items: center;
  }
}

::v-deep(span.level-1) {
  color: $failColor;
}
::v-deep(span.level-2) {
  color: $warningColor;
}
::v-deep(span.level-3),
::v-deep(span.level-default) {
  color: $mainColor;
}
//   链接
::v-deep(span.link-0) {
  color: $failColor;
}
::v-deep(span.link-1) {
  color: $failColor;
}
::v-deep(span.link-2) {
  color: $failColor;
}
::v-deep(span.link-3) {
  color: $failColor;
}
::v-deep(span.link-4) {
  color: $failColor;
}
::v-deep(span.link-5) {
  color: $failColor;
}
</style>
@/api/station
